<script setup lang="ts">
import { computed, ref } from 'vue'

const { disabled } = defineProps<{
  disabled: boolean // 控制查看处方选项是否可用
}>()

const emit = defineEmits<{
  (e: 'on-delete'): void
  (e: 'on-preview'): void
}>()

// 1. 展示气泡效果
const showPopover = ref(false) // 控制气泡的显示/隐藏
// 通过 actions 属性来定义菜单选项
const actions = computed(() => [
  { text: '查看处方', disabled },
  { text: '删除订单' }
])

// 选择了气泡中的选项
const onSelect = (obj: { text: string }, i: number) => {
  // 查看处方
  if (i === 0) {
    emit('on-preview')
  }
  // 删除
  if (i === 1) {
    emit('on-delete')
  }
}
</script>

<template>
  <div class="cp-consult-more">
    <van-popover
      placement="top-start"
      v-model:show="showPopover"
      :actions="actions"
      @select="onSelect"
    >
      <template #reference>
        <span>更多</span>
      </template>
    </van-popover>
  </div>
</template>

<style lang="scss" scoped>
.cp-consult-more {
  flex: 1;
  color: var(--cp-tag);
}
</style>
